<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="template::head">

</head>
<body class="sidebar-mini sidebar-collapse ng-cloak" ng-app="ESL" style="min-width: 1200px">
<div class="wrapper" ng-controller="ap_manager">
    <!-- Navbar -->
    <header th:include="template::header"></header>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>AP管理</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" >AP管理</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">

                    <!-- /.card -->

                    <div class="card">
                        <div class="card-header">

                            <div class="row">
                        </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <h4 th:text="#{esl_manager_list}">价签信息列表</h4>
                            <div >
                                <input type="text" id="apId_search" ng-model="search.apId" th:placeholder="基站ID"/>
                                <input type="text" id="mac_search" ng-model="search.mac" th:placeholder="MAC地址"/>
                                <input type="text" id="storeCode_search" ng-model="search.storeCode" th:placeholder="门店编码"/>
                                <input type="text" id="ip_search" ng-model="search.ip" th:placeholder="IP地址"/>
                                <button ng-click="loadItems()" class="btn btn-sm  btn-primary" th:text="#{action.search}">查询</button>
                                <button ng-click="reset()" class="btn btn-sm btn-primary">重置</button>
                            </div>
                            <div class="table-responsive">
                            <table id="tab1" class="table table-bordered table-hover table-condensed  " >
                                <thead>
                                <tr>
                                    <th><input type="checkbox"  ng-model="selectAll"  ng-change="changeAll()"/></th>
                                    <th></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_networkIP" class="fa fa-fw fa-sort" ng-click="sortBy('apId')"></i><span th:text="基站ID"></span></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_tinyIP" class="fa fa-fw fa-sort" ng-click="sortBy('mac')"></i><span th:text="MAC地址"></span></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_status" class="fa fa-fw fa-sort" ng-click="sortBy('status')"></i><span th:text="AP状态"></span></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_storeCode" class="fa fa-fw fa-sort" ng-click="sortBy('storeCode')"></i><span th:text="门店编码"></span></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_gidIndex" class="fa fa-fw fa-sort" ng-click="sortBy('channel')"></i><span th:text="信道号"></span></th>



                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_pushTimes" class="fa fa-fw fa-sort" ng-click="sortBy('version')"></i><span th:text="版本号"></span></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_defaultPageId" class="fa fa-fw fa-sort" ng-click="sortBy('ip')"></i><span th:text="IP地址"></span></th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_downloadDateTime" class="fa fa-fw fa-sort" ng-click="sortBy('onlineBeginTime')"></i><span th:text="AP登录时间"></span> </th>
                                    <th style="white-space: nowrap;" ><i id="id_sort_icon_feedbackTime" class="fa fa-fw fa-sort" ng-click="sortBy('lastWorkTime')"></i><span th:text="下线时间"></span> </th>
                                    <th style="white-space: nowrap;" th:text="#{action.operation}"></th>
                                    <!--<th></th>-->
                                </tr>
                                </thead>
                                <tbody>

                                <tr ng-repeat="ap in apList" ng-click="changeCurrents(ap,$event)">

                                    <td>
                                        <label>
                                            <input type="checkbox" value="{{ap.apId}}" ng-model="ap.checked" name="checkbox" ng-click="changeCurrent(ap,$event)"/>
                                        </label>
                                    </td>

                                    <td>{{$index+1}}</td>
                                    <td>{{ap.apId}}</td>
                                    <td>{{ap.mac}}</td>
                                    <td class="{{ap.status=='offline'?'bg-danger text-white':'bg-success text-white'}}">{{ap.status}}</td>
                                    <td>{{ap.storeBsid.storeCode}}</td>
                                    <td>{{ap.channel}}</td>
                                    <td>{{ap.version}}</td>
                                    <td>{{ap.ip}}</td>

                                    <td>{{ap.onlineBeginTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                    <td>{{ap.lastWorkTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
                                    <td><input type="button" ng-click="send_p8(ap)" class="btn btn-warning btn-sm" th:value="复位"/>
                                    <input type="button" ng-click="send_p9(ap)" class="btn btn-warning btn-sm" th:value="价签重登录"/>
                                        <input type="button" ng-click="openRemovePopup(ap.apId)" class="btn btn-danger btn-sm" th:value="删除"/>
                                    </td>
                                </tr>

                                </tbody>

                            </table>
                            </div>

                            <!--额外数据 -->
                            <navigation th:include="template::page"></navigation>
                        </div>

                    </div>

                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
            <!-- /.row -->
            <div class="modal fade" id="remove_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-sm" role="document" style="margin-top:300px;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="id_remove_modal_title" th:text="#{sku.removeAlertMsg}"></h4>
                            <input type="hidden" id="id_remove_modal_title_hidden" th:value="#{sku.removeAlertMsg}" />
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" th:text="#{action.close}"></button>
                            <button type="button" class="btn btn-primary" ng-click="delete()" th:text="#{action.confirm}"></button>
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- /.content -->



    </div>
    <!-- /.content-wrapper -->
    <footer th:include="template::footer"></footer>


</div>
<!-- ./wrapper -->



</body>
<navigation th:include="template::js"></navigation>
<script th:inline="javascript">


    var top_page=[[#{page.top_page}]]
    var previous_page= [[#{page.previous_page}]]
    var next_page= [[#{page.next_page}]]
    var tail_page=[[#{page.tail_page}]]
    var eslApp=angular.module('ESL',[])
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        var protocol=document.location.protocol;
        if('http:'==protocol){
            websocket = new WebSocket("ws://"+window.location.host+"/client/websocket");
        }else {
            websocket = new WebSocket("wss://"+window.location.host+"/client/websocket");
        }

        eslApp.value('websocket',websocket)
    }
    else {
        alert('Not support websocket')
    }
    eslApp.controller('ap_manager',function ($scope,$http,websocket,$timeout) {

        // var token = ${_csrf.token} ;
        $scope.menu={"ap":true} //记录当前页面对应的菜单
        $scope.search ={};
        $scope.apList=[]
        $scope.count = 0;//已选择数量
        $scope.current={}
        //点击单个checkbox
        $scope.changeCurrent = function(current, $event) {
            // //计算已选数量 true加， false减
            $scope.count += current.checked ? 1 : -1;
            //判断是否全选，选数量等于数据长度为true
            $scope.selectAll = $scope.count=== $scope.apList.length;
            //


            $event.stopPropagation();//阻止冒泡

        };



        //单击行选中
        $scope.changeCurrents = function(current, $event) {
            if(current.checked == undefined){
                current.checked = true;
            }else{
                current.checked = !current.checked;
            }
            $scope.changeCurrent(current, $event);
        };

        //全选（取消全选
        $scope.changeAll = function() {
            angular.forEach($scope.apList, function(item) {
                item.checked = $scope.selectAll;
            });
            $scope.count = $scope.selectAll ? $scope.apList.length : 0;

        };

        pagingScope($scope,{})

        $scope.gotoPage = function(page) {

            if(page!=0&&!page||page<0||page==$scope.pagination.number||page>=$scope.pagination.totalPages){
                return;
            }

            $scope.page = page;
            $scope.loadItems();

        }
        $scope.changeSize = function() {
            $scope.page =0
            $scope.loadItems();
        }




        $scope.init=function (){

            $scope.loadItems();
        };

        $scope.loadItems = function(){
            $http({
                url:"/ap_rest/ap/listByPage",
                data:{page : $scope.page, size : $scope.size, sortStr : $scope.sort, sortAscOrDesc : $scope.sortAscOrDesc, 'searchObj' : JSON.stringify($scope.search)},
                method:"post",
                // headers:{'X-CSRF-TOKEN': token,'Content-Type': 'application/x-www-form-urlencoded'},
                headers:{'Content-Type': 'application/x-www-form-urlencoded'},
                transformRequest: function(obj) {
                    var str = [];
                    for (var s in obj) {
                        str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                    }
                    return str.join("&");
                }
            }).success(function (json) {
                $scope.apList = json.content;
                $scope.pagination = getPagination(json, $scope.page);
                $scope.selectAll=false;
                $scope.count=0;

            }).
            error(function (msg) {
                alert(msg.message)
            })

        }
        $scope.init()




        $scope.openRemovePopup = function(apid) {
            $scope.current.apId=apid;
            $("#id_remove_modal_title").html(($("#id_remove_modal_title_hidden").val() + ""));
            angular.element("#remove_modal").modal("show");


        }
        $scope.delete=function () {
            $http({
                url:"ap_rest/delete",
                params:{apid:$scope.current.apId}
            }).success(function () {
                angular.element("#remove_modal").modal("hide");
                $scope.loadItems()
            }).error(function (msg) {
                angular.element("#remove_modal").modal("hide");
                alert(msg.message)
            })
        }








        $scope.send_p8=function (ap) {
            if(ap.status=="offline"){
                alert("基站未登录")
                return;
            }
            $http({
                url:"/esl_rest/send_p8",
                params:{"networkIP":ap.apId},
            }).success(function (msg) {
                alertSuccess()

            }).error(function (msg) {
                alert(msg.message)
            })
        }
        $scope.send_p9=function (ap) {
            if(ap.status=="offline"){
                alert("基站未登录")
                return;
            }
            $http({
                url:"/esl_rest/send_p9",
                params:{"networkIP":ap.apId},
            }).success(function (msg) {
                alertSuccess()
            }).error(function (msg) {
                alert(msg.message)
            })
        }


        function getNewDate() {
            Date.prototype.format()
        }

        //重置查询
        $scope.reset=function () {
            $scope.search={};
        }



        //webSocket begin


        //连接发生错误的回调方法
        websocket.onerror = function () {
            // setMessageInnerHTML("WebSocket connect error");
        };

        //连接成功建立的回调方法
        websocket.onopen = function () {
            // setMessageInnerHTML("WebSocket连接成功");
        }

        //接收到消息的回调方法
        websocket.onmessage = function (event) {

            var data=JSON.parse(event.data)

           if(data.cmd=='apConnected'||data.cmd=="apDisconnect"){   //基站建立连接
                $scope.loadItems()
            }


            $scope.$apply();
        }


        //连接关闭的回调方法
        websocket.onclose = function () {
            // setMessageInnerHTML("message window closed");
        }

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            return;
            if(document.getElementById('message'))
            document.getElementById('message').innerHTML = innerHTML + '\r\r'+document.getElementById('message').innerHTML;
        }

        //关闭WebSocket连接
        function closeWebSocket() {
            websocket.close();
        }

        //发送消息
        function send() {
            var message = document.getElementById('text').value;
            websocket.send(message);
        }
        //webSocket end



    });

</script>
</html>
